<template>
  <div>
    <el-button type="primary" @click="dataSourceDrawer = true">
      <el-icon class="_m-r-5"> <Coin /> </el-icon
      >{{
        (dsList.find((item) => item.val === this.$comStore.app.dsId) || {}).name
      }}</el-button
    >

    <el-drawer
      v-model="dataSourceDrawer"
      title="请选择数据源"
      :with-header="false"
    >
      <template v-for="item in dsList" :key="item.val">
        <div
          class="_wrapper-x _p10 _border _m-b-10 dataSourceItem"
          :class="{ dataSourceActive: item.val === this.$comStore.app.dsId }"
          @click="changeDs(item.val)"
        >
          <el-icon><Coin /></el-icon>
          {{ item.name }}
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script>
import toolAction from "@/tool/http/tool-action";

let apiDs = toolAction.init("data_source");
export default {
  data() {
    return {
      dsList: [],
      dataSourceDrawer: false,
    };
  },
  mounted() {
    apiDs.dict().then((res) => {
      this.dsList = [
        ...res,
        {
          name: "默认",
          val: undefined,
        },
      ];
    });
  },
  methods: {
    changeDs(dsId) {
      this.$comStore.app.syncDsId(dsId);
      this.$emit("comChange", dsId);
    },
  },
};
</script>

<style></style>
